<!-- <div class="box">
  <div class="box-heading"><?php echo $heading_title; ?></div>
  <div class="box-content">
    <div class="box-product">
      <?php foreach ($products as $product) { ?>
      <div>
        <?php if ($product['thumb']) { ?>
        <div class="image"><a href="<?php echo $product['href']; ?>"><img src="<?php echo $product['thumb']; ?>" alt="<?php echo $product['name']; ?>" /></a></div>
        <?php } ?>
        <div class="name"><a href="<?php echo $product['href']; ?>"><?php echo $product['name']; ?></a></div>
        <?php if ($product['price']) { ?>
        <div class="price">
          <?php if (!$product['special']) { ?>
          <?php echo $product['price']; ?>
          <?php } else { ?>
          <span class="price-old"><?php echo $product['price']; ?></span> <span class="price-new"><?php echo $product['special']; ?></span>
          <?php } ?>
        </div>
        <?php } ?>
        <?php if ($product['rating']) { ?>
        <div class="rating"><img src="catalog/view/theme/default/image/stars-<?php echo $product['rating']; ?>.png" alt="<?php echo $product['reviews']; ?>" /></div>
        <?php } ?>
        <div class="cart"><input type="button" value="<?php echo $button_cart; ?>" onclick="addToCart('<?php echo $product['product_id']; ?>');" class="button" /></div>
      </div>
      <?php } ?>
    </div>
  </div>
</div> -->

 
<div class="container lastest">
	<h1 class="title">LASTEST PRODUCTS</h1>
	<div class="row">
		<div class="col-sm-3 col-left">
			
		<?php if ($products){	for ( $counter = 0; $counter < 5; $counter+=1) {
        if ($counter == 3 ) {?>
          <div class="row promotion">
              <div class="col-sm-11">
                            <div class="col-sm-6">
                                <h4>21 to 25 <br>September</h4>
                            </div>
                            <div class="col-sm-6 text-right">
                                <h4>Season<br>Sale</h4>
                                <hr align="right">
                                <h4>40% off<br>Consumer Electronic</h4>
                            </div>
                        </div>
            </div><!-- end promotion -->    
        <?php }?>
				<div class="row">
        				<div class="product col-sm-11">
                           <span class="soldout">FREE DELIVERY</span>
                                <div class="productImg">
									<a href="<?php echo  $products[$counter]['href'] ?>"><img class="img-responsive" src="<?php echo $products[$counter]['thumb']; ?>" alt="<?php echo $products[$counter]['name']; ?>" /></a>
                                </div>
                                 <h4 class="text-center"><?php echo $products[$counter]['name']; ?></h4>
                                <div class="priceTag row text-center">
                                	<span class="old-price"><?php echo $products[$counter]['price']; ?></span>
									<?php if (!$products[$counter]['special']) { ?>
										<span class="new-price"><?php echo $products[$counter]['special']; ?></span>
									<?php } ?>
                                    <!--<div id = "cart" class="button col-sm-6 text-right">
                                        <a  onclick="addToCart('<?php echo $products[$counter]['product_id']; ?>','1');" ><img src="/catalog/view/theme/mbe/images/add.png"></a>
                                        <a href = "" ><img src="/catalog/view/theme/mbe/images/search.png"></a>
                                    </div>-->
                                </div>
                                <div>
                                    <a class="view" href="<?php echo  $products[$counter]['href'] ?>">View Product</a>
                                </div>  
						   
						   
                        </div>
				</div> 
			<?php } } ?>
					
		</div>
		 
			<div class="col-sm-9 col-right">
    				<div class="row">
						<?php for ( $counter = 5; $counter < 8; $counter+=1) { ?>
             
						 <div class="col-sm-4">
							<div class="product col-sm-12">
								<span class="soldout">FREE DELIVERY</span>
                                 <div class="productImg">
                                    <a href="<?php echo  $products[$counter]['href'] ?>"><img class="img-responsive" src="<?php echo $products[$counter]['thumb']; ?>" alt="<?php echo $products[$counter]['name']; ?>" /></a>
                                </div>
                                 <h4 class="text-center"><?php echo $products[$counter]['name']; ?></h4>
                                <div class="priceTag row text-center">
                                    <span class="old-price"><?php echo $products[$counter]['price']; ?></span>
                                    <?php if (!$products[$counter]['special']) { ?>
                                        <span class="new-price"><?php echo $products[$counter]['special']; ?></span>
                                    <?php } ?>
                                    <!--<div id = "cart" class="button col-sm-6 text-right">
                                        <a  onclick="addToCart('<?php echo $products[$counter]['product_id']; ?>','1');" ><img src="/catalog/view/theme/mbe/images/add.png"></a>
                                        <a href = "" ><img src="/catalog/view/theme/mbe/images/search.png"></a>
                                    </div>-->
                                </div>
                                <div>
                                    <a class="view" href="<?php echo  $products[$counter]['href'] ?>">View Product</a>
                                </div>    
							</div>
						</div>
						<?php } ?>	
					</div>
          <!-- mid menu -->
                    <div class="row mid-menu">
                        <div class="col-sm-12" >
                            <div class="row">
                                <div class="col-sm-4">
                                </div>
                                <div class="col-sm-4">
                                    <div class="col-sm-10">
                                        <div class="sub-title"><h4>PRINTER &amp; PARTS</h4></div>
                                        <div class="sub-list">
                                            <div class="leftCol">
                                              <ul>
                                                    <li><a href="#">Inkjet Printers</a></li>
                                                    <li><a href="#">Laser Printers</a></li>
                                                    <li><a href="#">Printer Parts</a></li>
                                                    <li><a href="#">Paper</a></li>
                                                </ul>
                                            </div>
                                            <div class="rightCol" style="visibility:hidden;">
                                              <ul>
                                                    <li><a href="#">MP3 / MP4 / MP5</a></li>
                                                    <li><a href="#">Telephone</a></li>
                                                    <li><a href="#">Camera</a></li>
                                                    <li><a href="#">Camcorders</a></li>
                                                </ul>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-sm-4">
                                    <div class="col-sm-10">
                                        <div class="sub-title"><h4>TV &amp; HOME ENTERTAIMENT</h4></div>
                                        <div class="row">
                                            <div class="col-sm-6">
                                              <ul>
                                                    <li><a href="#">Televisions</a></li>
                                                    <li><a href="#">DVD / Blu-Ray</a></li>
                                                    <li><a href="#">Surround Sound</a></li>
                                                    <li><a href="#">Hi - Fi</a></li>
                                                </ul>
                                            </div>
                                            <div class="col-sm-6">
                                              <ul>
                                                    <li><a href="#">TV Stands &amp; Mounts</a></li>
                                                    <li><a href="#">Set - Top Boxes</a></li>
                                                    <li><a href="#">Projecttors</a></li>
                                                    <li><a href="#">Media Player &amp; <br>Streaming</a></li>
                                                </ul>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div><!-- end row mid-menu 1 -->
                            <div class="row">
                                <div class="col-sm-4">
                                    <div class="col-sm-10">
                                        <div class="sub-title"><h4>CONSUMER ELECTRONICS</h4></div>
                                        <div class="row">
                                            <div class="col-sm-6">
                                              <ul>
                                                    <li><a href="#">Ipod &amp; Docks</a></li>
                                                    <li><a href="#">Speaker Docks</a></li>
                                                    <li><a href="#">Headphones</a></li>
                                                    <li><a href="#">Mobile Phones</a></li>
                                                </ul>
                                            </div>
                                            <div class="col-sm-6">
                                              <ul>
                                                    <li><a href="#">MP3 / MP4 / MP5</a></li>
                                                    <li><a href="#">Telephone</a></li>
                                                    <li><a href="#">Camera</a></li>
                                                    <li><a href="#">Camcorders</a></li>
                                                </ul>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-sm-4">
                                    <div class="col-sm-10">
                                        <div class="sub-title"><h4>COMPUTING &amp; PERIPHERALS</h4></div>
                                        <div class="row">
                                            <div class="col-sm-6">
                                              <ul>
                                                    <li><a href="#">Laptops</a></li>
                                                    <li><a href="#">Tablet PCs</a></li>
                                                    <li><a href="#">Desktop PCs</a></li>
                                                    <li><a href="#">Netbooks</a></li>
                                                </ul>
                                            </div>
                                            <div class="col-sm-6">
                                              <ul>
                                                    <li><a href="#">eReaders</a></li>
                                                    <li><a href="#">Notebooks</a></li>
                                                    <li><a href="#">Accessories</a></li>
                                                    <li><a href="#">Peripherals</a></li>
                                                </ul>
                                            </div>
                                            <div class="clear"></div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-sm-4" style="">
                                    <div class="col-sm-12">
                                        <div class="sub-title"><h4>STORAGE &amp; BLANK MEDIA</h4></div>
                                        <div class="row">
                                            <div class="col-sm-6">
                                              <ul>
                                                    <li><a href="#">Internal Hard Drivers</a></li>
                                                    <li><a href="#">External Hard Drivers</a></li>
                                                    <li><a href="#">SSD/Solid State Drivers</a></li>
                                                    <li><a href="#">Memory Cards</a></li>
                                                </ul>
                                            </div>
                                            <div class="col-sm-6">
                                              <ul>
                                                    <li><a href="#">Flash USB Memory</a></li>
                                                    <li><a href="#">Blank Media<br>(CD / DVD / Blu-Ray)</a></li>
                                                </ul>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div><!-- end row mid-menu 2 -->
                        </div>
                    </div>
                    <!-- end mid menu -->
                    <div class="row">
                        <div class="col-sm-4">
                            <?php $i = 0;?>
            <?php for ( $counter = 8; $counter < count($products); $counter+=1) { ?>

             <?php 
                 if ($i == 4) {
                    echo '</div><div class="col-sm-4">';
                    $i=0;
                 } 
                 $i++;
             ?>
             <?php if ($counter == 12) { $plus = 'plus10';}?>
              <div class="product col-sm-12 <?php echo $plus; $plus = '';?>" >
                <span class="soldout">FREE DELIVERY</span>
                 <div class="productImg">
                    <a href="<?php echo  $products[$counter]['href'] ?>"><img class="img-responsive" src="<?php echo $products[$counter]['thumb']; ?>" alt="<?php echo $products[$counter]['name']; ?>" /></a>
                </div>
                 <h4 class="text-center"><?php echo $products[$counter]['name']; ?></h4>
                <div class="priceTag row text-center">
                    <span class="old-price"><?php echo $products[$counter]['price']; ?></span>
                    <?php if (!$products[$counter]['special']) { ?>
                        <span class="new-price"><?php echo $products[$counter]['special']; ?></span>
                    <?php } ?>
                    <!--<div id = "cart" class="button col-sm-6 text-right">
                        <a  onclick="addToCart('<?php echo $products[$counter]['product_id']; ?>','1');" ><img src="/catalog/view/theme/mbe/images/add.png"></a>
                        <a href = "" ><img src="/catalog/view/theme/mbe/images/search.png"></a>
                    </div>-->
                </div>
                <div>
                    <a class="view" href="<?php echo  $products[$counter]['href'] ?>">View Product</a>
                </div>    
              </div>
            
            <?php } ?>  
            </div>
          </div>
			</div>
		
	</div>
</div>
<style type="text/css" >
    .wrapper .plus10  {
		height:400px;
    }
	.wrapper .plus10 .priceTag {
		padding-top: 38px;
	}
	.wrapper .plus10 h4 {
		margin-top:25px;
	}
</style>

